<template>
    <div class="wrapper" ref="wrapper">
      <div>
        <div class="box">
          <div class="tit">当前城市</div>
          <ul class="btn_list">
            <li><div>{{this.$store.state.city}}</div></li>

          </ul>
        </div>
        <div class="box">
          <div class="tit">热门城市</div>
          <ul class="btn_list">
            <li v-for="(item,index) in hotCities"
                :key="item.id"
                @click="handleCityClick(item.name)"
            >
              <div>{{item.name}}</div>
            </li>

          </ul>
        </div>
        <div class="box" v-for="(item,key) in cities" :key="key" :ref="key">
          <div class="tit">{{key}}</div>
          <ul class="list_city">
            <li v-for="(item,index) in item"
                @click="handleCityClick(item.name)"
            >{{item.name}}</li>

          </ul>
        </div>
      </div>
    </div>
</template>

<script>
  import Bscroll from 'better-scroll'
    export default {
        name: "List",
        props:{
          cities:Object,
          hotCities:Array,
          letter:String
        },
        methods:{
            handleCityClick(city){
              this.$store.dispatch('changeCity',city);
              this.$router.push('/')

            }
        },
        mounted(){
            this.scroll=new Bscroll (this.$refs.wrapper)
        },
        watch:{
          letter(){
            if(this.letter){
              // console.log(this.letter)
              const element=this.$refs[this.letter][0];
              // console.log(element);
              this.scroll.scrollToElement(element);
            }
          }
        }
    }
</script>

<style lang="stylus" scoped>
  .wrapper{
    position:absolute;
    top:.8rem;
    left:0;
    bottom:0;
    overflow:hidden;
    width:100%;

    .box{
      .tit{
        line-height:.26rem;
        padding-left:.1rem;
        color:#666;
        border-bottom:1px solid #cacaca;
        background:#eaeaea;
      }
      .btn_list{
        padding:.05rem .3rem .05rem .05rem;
        overflow:hidden;
        box-sizing:border-box;
        li{
          width:33.3%;
          float:left;
          div{
            margin:.05rem;
            text-align:center;
            padding:.05rem 0;
            border-radius:.03rem;
            border:1px solid #ccc;
          }
        }
      }
      .list_city{
        li{
          line-height:.3rem;
          padding-left:.1rem;
          color:#666;
          border-bottom:1px solid #ccc;
        }
      }
    }
  }
</style>
